<template>
  <div class="message-center">
    <div class="header">
      <div class="back-button" @click="goBack">
        <van-icon name="arrow-left" size="24" />
      </div>
      <div class="title">消息中心</div>
      <div class="right-options">已读(2)</div>
    </div>

    <div class="message-list">
      <!-- 系统通知 -->
      <div class="message-item">
        <div class="message-icon system-icon">
          <van-icon name="volume" color="#fff" size="24" />
        </div>
        <div class="message-content">
          <div class="message-title">系统通知</div>
          <div class="message-desc">暂无新消息</div>
        </div>
        <div class="message-time">09:11</div>
      </div>

      <!-- 营销活动 -->
      <div class="message-item">
        <div class="message-icon marketing-icon">
          <van-icon name="gift" color="#fff" size="24" />
        </div>
        <div class="message-content">
          <div class="message-title">营销活动</div>
          <div class="message-desc">我也要当酱天天老客>>></div>
        </div>
        <div class="message-time">09:11</div>
      </div>

      <!-- 骑手通知1 -->
      <div class="message-item">
        <div class="message-icon rider-icon">
          <van-icon name="logistics" color="#fff" size="24" />
        </div>
        <div class="message-content">
          <div class="message-title">骑手</div>
          <div class="message-desc">[美团] 温馨提示合理规划用餐上沟通功能，注...</div>
        </div>
        <div class="message-time">昨天 19:12</div>
      </div>

      <!-- 华莱士订单 -->
      <div class="message-item">
        <div class="message-icon shop-icon">
          <img :src="require('@/assets/images/product/food.png')" alt="华莱士" />
        </div>
        <div class="message-content">
          <div class="message-title">华莱士-全鸡汉堡(莲花池店)</div>
          <div class="message-desc">亲爱的顾客，您的订单已送达，祝您用餐愉...</div>
        </div>
        <div class="message-time">昨天 19:11</div>
      </div>

      <!-- 古茗订单 -->
      <div class="message-item">
        <div class="message-icon shop-icon">
          <img :src="require('@/assets/images/product/food1.png')" alt="古茗" />
        </div>
        <div class="message-content">
          <div class="message-title">古茗（青红街道店）</div>
          <div class="message-desc">评价有礼~亲爱的顾客，谢谢您对本次订单做...</div>
        </div>
        <div class="message-time">周五 14:34</div>
      </div>

      <!-- 骑手通知2 -->
      <div class="message-item">
        <div class="message-icon rider-icon">
          <van-icon name="logistics" color="#fff" size="24" />
        </div>
        <div class="message-content">
          <div class="message-title">骑手</div>
          <div class="message-desc">[图片]</div>
        </div>
        <div class="message-time">周五 14:34</div>
      </div>

      <!-- 美宜佳订单 -->
      <div class="message-item">
        <div class="message-icon shop-icon highlight">
          <span class="urgent-text">重要性</span>
        </div>
        <div class="message-content">
          <div class="message-title">美宜佳（富力城概城里滴005）</div>
          <div class="message-desc">[感谢点评]订单已送达，来评价一下吧～</div>
        </div>
        <div class="message-time">2025/05/04</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MessageCenter',
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  }
}
</script>

<style lang="less" scoped>
.message-center {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  background-color: #f6f6f6;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 10;
  
  .back-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .title {
    font-size: 36px;
    font-weight: 500;
    color: #333;
  }
  
  .right-options {
    font-size: 28px;
    color: #666;
  }
}

.message-list {
  .message-item {
    display: flex;
    align-items: center;
    padding: 26px 20px;
    background-color: #fff;
    border-bottom: 1px solid #f5f5f5;
    
    .message-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      flex-shrink: 0;
      
      &.system-icon {
        background-color: #ffaa00;
      }
      
      &.marketing-icon {
        background-color: #ff6633;
      }
      
      &.rider-icon {
        background-color: #ffaa00;
      }
      
      &.shop-icon {
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        &.highlight {
          background-color: #ff3333;
          
          .urgent-text {
            color: #fff;
            font-size: 22px;
          }
        }
      }
    }
    
    .message-content {
      flex: 1;
      overflow: hidden;
      
      .message-title {
        font-size: 30px;
        color: #333;
        font-weight: 500;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .message-desc {
        font-size: 26px;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    
    .message-time {
      font-size: 24px;
      color: #999;
      margin-left: 10px;
      flex-shrink: 0;
    }
  }
}
</style> 